// 分时线
import { defineComponent, onMounted, ref } from "vue";
import { dxget, qurl } from "../../util/index";
export default defineComponent({
  props: {
    code: {
      type: String,
    },
    info: {
      type: Object,
    },
  },
  setup(props) {
    let data1 = [],
      bdata = [],
      data2 = [];

    const getData = (data) => {
      const total = data;
      total.map((a) => {
        let jhbse = a.split(",");
        data1.push(jhbse[0]);
        data2.push(jhbse[2]);
      });
    };
    const setHour = (h, m) => {
      const dates = new Date();
      dates.setHours(h);
      dates.setMinutes(m);
      dates.setSeconds(0);
      return dates.getTime();
    };
    const getHM = (t) => {
      const time = new Date(t);
      const Year = time.getFullYear(),
        Month = time.getMonth() + 1,
        Data = time.getDate() < 10 ? 0 + "" + time.getDate() : time.getDate();
      let hour =
          time.getHours() < 10 ? 0 + "" + time.getHours() : time.getHours(),
        Minutes =
          time.getMinutes() < 10
            ? 0 + "" + time.getMinutes()
            : time.getMinutes();
      return hour + ":" + Minutes;
    };
    const getTime = () => {
      let startT = setHour(9, 30),
        startE = setHour(11, 30),
        xstartT = setHour(13, 0),
        xstartE = setHour(15, 0);

      let jbjne = [startT];
      let jbjnex = [xstartT];
      let startEnd = (startE - startT) / (1000 * 60); //开始时间和结束时间一共多少秒
      let startEndx = (xstartE - xstartT) / (1000 * 60); //开始时间和结束时间一共多少秒
      for (let i = 1; i <= startEnd; i++) {
        let jbde = startT + i * 1000 * 60;
        jbjne.push(jbde);
      }
      for (let i = 1; i <= startEndx; i++) {
        let jbde = xstartT + i * 1000 * 60;
        jbjnex.push(jbde);
      }

      let jneer = [];
      jbjne.map((a) => {
        jneer.push(getHM(a));
      });

      jbjnex.map((a) => {
        jneer.push(getHM(a));
      });
      return jneer;
    };
    onMounted(async () => {
      let res: any = await dxget("dc/Accesspoints", {
        code: props.code,
      });
      getData(res.data);

      let option = {
        // 图相对于容器的位置
        grid: {
          left: "4%",
          right: "0%",
          bottom: "0%",
          top: "4%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#f8f8f8",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              onZero: false,
            },
            data: getTime(),
            show: false,
          },
        ],
        yAxis: [
          {
            name: "价格",
            type: "value",
            scale: true,
            splitNumber: 4,
          },
        ],
        series: [
          {
            name: "价格",
            type: "line",
            symbol: "none",
            lineStyle: {
              width: 1,
            },
            data: data2,
            markLine: {
              silent: true,
              // 去掉箭头
              symbol: "none",
              data: [
                [
                  {
                    symbol: "none",
                    x: "0%",
                    yAxis: "max",
                  },
                  {
                    symbol: "circle",
                    type: "max",
                  },
                ],
                [
                  {
                    symbol: "none",
                    x: "0%",
                    yAxis: "min",
                  },
                  {
                    symbol: "circle",
                    type: "min",
                    name: "最高点",
                  },
                ],
                [
                    
                  {
                    type: "max",
                   
                  },
                  {
                    type: "min"
                  },
                ],
              ],
              lineStyle: {
                normal: {
                  type: "dashed",
                  color: "red",
                },
              },
              label: {
                formatter: "",
              },
            },
          },
        ],
      };
      var myChart = window.echarts.init(document.getElementById("echarDxfs"));
      myChart.setOption(option);



      let ckmns = 0
                setInterval(() => {
                    let jjnse = props.info.f43
                    let jhbxl = data2[data2.length - 1]
                    if (ckmns++ < 60) {
                        data2[data2.length - 1] = jjnse
                    } else {
                        ckmns = 0
                      data2.push(jjnse)
                    }

                    myChart.setOption({
                        series: [{
                            data: data2
                        }]
                    });
                }, 1000);

    });

    return () => (
      <>
        <n-card title="分时线">
          <div class="kxianbox">
            <div class="echarDx" id="echarDxfs"></div>
          </div>
        </n-card>
      </>
    );
  },
});
